<template>
  <div>
    <br>
        <el-row>
        <el-form :rules="rules" :model="user" ref="user" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item prop="uname" label="用户名">
                <el-input  v-model="user.uname" style="width: 200px" placeholder="请输入用户名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="phone" label="手机号">
                <el-input  v-model="user.phone" style="width: 200px" placeholder="请输入手机号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="6">
          <el-form-item label="邮箱地址" prop="mailAddress">
            <el-input v-model="user.mailAddress" style="width: 200px" placeholder="请输入邮箱地址"></el-input>
          </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="省">
              <el-select v-model="user.deliveryAddressPick.pid" placeholder="请选择" @change="provinces_change">
                <el-option label="--请选择--" value="0"></el-option>
                <el-option v-for="p in provinces" :label="p.name" :value="p.id"></el-option>
              </el-select>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="市">
                <el-select v-model="user.deliveryAddressPick.cid" placeholder="请选择" @change="citys_change">
                  <el-option label="--请选择--" value=""></el-option>
                  <el-option v-for="c in citys" :label="c.name" :value="c.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="区">
                <el-select v-model="user.deliveryAddressPick.rid" placeholder="请选择">
                  <el-option label="--请选择--" value=""></el-option>
                  <el-option v-for="r in regions" :label="r.name" :value="r.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="address">
                <el-input v-model="user.deliveryAddressPick.address" placeholder="请输入详细地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item>
                <el-button type="primary" round style="width: 200px" @click="submitForm('user')">提交</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        </el-row>




  </div>
</template>

<script>
  import Addr from "../../lifukang/components/Addr";
    export default {
        name: "file_maintenance",
      data(){
          return{
            provinces:[],
            citys:[],
            regions:[],
            user:{
              deliveryAddressPick:{
                uid:sessionStorage.getItem("id"),//获取当前登录的用户id
                pid:"",
                cid:"",
                rid:"",
                address:""
              }
              },
            rules:{
              uname:[
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
              ],
              phone:[
                {required: true, message:'请输入电话',trigger:'blur'},
                {pattern: /(^1[3|4|5|8][0-9]\d{4,8}$)/, message: '长度在必须是11,开头必须是1', trigger: 'blur'}
              ],
              mailAddress:[
              {
                required: true,
                pattern: /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/,
                message:'请输入正确的邮箱地址',trigger:'blur'
              }
              ],
              address:[{equired: true, message: '请输入详细地址', trigger: 'blur' }]
            }

          }
      },
      methods:{
        getData(){
          this.$axios.get("queryUserById.action/"+this.user.deliveryAddressPick.uid).then(res=>{
            this.user=res.data;
            //调用异步，查询所有的省
            this.$axios.post("province/getAllprovince.action",null).
            then((response)=> {   //异步调用成功执行
              //将查询到的所有省存入对象数组中
              this.provinces=response.data;
            }).catch(function (error) {//异步调用失败执行
              this.$message.error(error)
            });

            let paramss=new URLSearchParams()
            paramss.append("id",this.user.deliveryAddressPick.pid);
            //调用异步，根据当前用户的省，查询该省下的市
            this.$axios.post("city/queryByPid.action",paramss).
            then((response)=> {   //异步调用成功执行
              //将查询到的所有省存入对象数组中
              this.citys=response.data;
            }).catch(function (error) {//异步调用失败执行
              this.$message.error(error)
            });

            let params= new URLSearchParams()
            params.append("id",this.user.deliveryAddressPick.cid)
            //调用异步，根据当前用户的市，查询该省下的区
            this.$axios.post("region/queryByPid.action",params).
            then((response)=> {   //异步调用成功执行
              //将查询到的所有省存入对象数组中
              this.regions=response.data;
            }).catch(function (error) {//异步调用失败执行
              this.$message.error(error)
            });
          }).catch(error=>{
            this.$message.error(error)
          })

        },
        provinces_change(){
          //清空市区的数组内容
          this.citys=[];
          this.regions=[];
          this.user.deliveryAddressPick.cid="";
          this.user.deliveryAddressPick.rid="";
          //调用异步，根据省id，获取该省下所有的市
          let params = new URLSearchParams();
          params.append("id",this.user.deliveryAddressPick.pid);
          this.$axios.post("city/queryByPid.action",params).
          then((response)=> {   //异步调用成功执行
            //将查询到的所有市存入对象数组中
            this.citys=response.data;
          }).catch(function (error) {//异步调用失败执行
            alert(error);
          });
        },
        citys_change(e){
          this.user.deliveryAddressPick.rid="";
          //调用异步，根据省id，获取该省下所有的市
          let params = new URLSearchParams();
          params.append("id",this.user.deliveryAddressPick.cid);
          this.$axios.post("region/queryByPid.action",params).
          then((response)=> {   //异步调用成功执行
            //将查询到的所有市存入对象数组中
            this.regions=response.data;
          }).catch(function (error) {//异步调用失败执行
            alert(error);
          });
        },
        submitForm(user) {
          this.$refs[user].validate((valid) => {
            if (valid) {
              this.editform()
            } else {
              return false;
            }
          });
        },
        editform(){
          this.$axios.put("updatecomm.action",this.user).then(res=>{
            if (res.data.code>0){
              this.$message.success(res.data.msg);
              this.getData();
            }else {
              this.$message.error(res.data.msg)
            }
          }).catch(error=>{
            this.$message.error(error)
          })

         }

      },
      created(){
        this.getData();
      },
      components:{
          Addr
      }
    }
</script>

<style scoped>
  .box-card {
    width: 100%;
  }
</style>
